<template>
  <div class="box">
    <div class="main">
      <div class="header">
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <div class="search">
        <subject-seach
          @search="getList"
          :pageSize="currentSize"
          :page="currentPage"
          :type="1"
          ref="seach"
        />
      </div>
      <div class="audit">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" ref="tabs" >
          <el-tab-pane
            v-for="item in chkType"
            :key="item.id"
            :label="item.label"
            :name="item.value.toString()"
          >
            <el-alert :title="infoTip" type="info" show-icon> </el-alert>
            <el-table :data="list" style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="120">
              </el-table-column>
              <el-table-column prop="subject" label="学科"> </el-table-column>
              <el-table-column
                prop="catalog"
                label="目录"
                width="100"
              ></el-table-column>
              <el-table-column prop="questionType" label="题型" width="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.questionType == 1">单选</span>
                  <span v-else-if="scope.row.questionType == 2">多选</span>
                  <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column prop="question" label="题干" width="280">
                <template slot-scope="scope">
                  <span v-html="scope.row.question"></span>
                </template>
              </el-table-column>
              <el-table-column prop="addDate" label="录入时间" width="180">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.addDate) }}
                </template>
              </el-table-column>
              <el-table-column label="难度" prop="difficulty" width="180">
                <template slot-scope="scope">
                  <span v-if="scope.row.difficulty == 1">简单</span>
                  <span v-else-if="scope.row.difficulty == 2">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column
                label="录入人"
                prop="creator"
                width="180"
              ></el-table-column>
              <el-table-column label="审核状态" width="100">
                <template slot-scope="{ row }">
                  <span v-if="row.chkState == 0">未审核</span>
                  <span v-else-if="row.chkState == 1">已审核</span>
                  <span v-else>已拒绝</span>
                </template>
              </el-table-column>
              <el-table-column
                label="审核意见"
                prop="chkRemarks"
                width="100"
              ></el-table-column>
              <el-table-column
                label="审核人"
                prop="chkUser"
                width="100"
              ></el-table-column>
              <el-table-column label="发布状态" prop="publishState" width="100">
                <template slot-scope="{ row }">
                  <span v-if="row.publishState == 0">已下架</span>
                  <span v-else-if="row.publishState == 1">已发布</span>
                  <span v-else>待发布</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="200"
                align="center"
              >
                <template slot-scope="{ row }">
                  <el-button type="text" size="small"  @click="showQuestionView(row.id)">预览</el-button>
                  <el-button type="text" size="small" :disabled="row.chkState!==0" @click="clickAudit(row.id) ">审核</el-button>
                  <el-button type="text" size="small" :disabled="row.chkState!==1" @click="editQuestion(row.id)">修改</el-button>
                  <el-button type="text" size="small" @click="Clicktoonline(row)">{{row.publishState===0? '下架':'上架'}}</el-button>
                  <el-button type="text" size="small" :disabled="row.publishState===0" @click="deleteupanddowm(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="counts"
          :page-size="currentSize"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <question-preview
      :visible.sync="questionViewVisible"
      ref="questionPreview"
    ></question-preview>
    <question-audit
    :visible.sync="AuditdialogVisible"
    ref="questionAudit"
    @customEvent="handleCustomEvent"
    >
    </question-audit>
  </div>
</template>
<script>
import subjectSeach from '../components/subject-seach.vue'
import questionPreview from '../components/question-preview'
import questionAudit from '../components/question-audit.vue'
import { parseTime } from '@/utils'
import { chkType } from '@/api/hmmm/constants'
import { remove as delupanddown, choicePublish } from '@/api/hmmm/questions'
export default {
  name: 'questionsChoice',
  components: {
    subjectSeach,
    questionPreview,
    questionAudit
  },
  props: {
    tableData: {
      typeof: Array,
      default: () => []
    }
  },
  data () {
    return {
      activeName: chkType[0].value.toString(),
      counts: 0,
      pages: 0,
      list: [],
      currentPage: 1,
      currentSize: 5,
      chkState: 3,
      chkType: chkType,
      // 预览弹出对话框控制
      questionViewVisible: false,
      // 审核弹出对话框
      AuditdialogVisible: false
    }
  },
  created () {},
  computed: {
    infoTip () {
      return `数据一共 ${this.counts} 条`
    }
  },
  methods: {
    handleClick (tab, event) {
      this.currentPage = 1
      if (this.activeName === '3') {
        this.$refs.seach.search(this.currentPage, this.currentSize)
      } else {
        this.$refs.seach.search(this.currentPage, this.currentSize, this.activeName)
      }
    },
    // 拿到子盒子的值
    getList (value) {
      this.list = value.items
      this.counts = value.counts
      this.pages = value.pages
    },
    // 时间格式化
    parseTime (time) {
      return parseTime(new Date(time))
    },
    // 分页
    handleCurrentChange (val) {
      this.currentPage = val
      if (this.activeName === '3') {
        this.$refs.seach.search(this.currentPage, this.currentSize)
      } else {
        this.$refs.seach.search(this.currentPage, this.currentSize, this.activeName)
      }
    },
    handleSizeChange (val) {
      this.currentSize = val
      this.currentPage = 1
      if (this.activeName === '3') {
        this.$refs.seach.search(this.currentPage, this.currentSize)
      } else {
        this.$refs.seach.search(this.currentPage, this.currentSize, this.activeName)
      }
    },
    // 预览题目
    showQuestionView (id) {
      this.questionViewVisible = true
      this.$refs.questionPreview.getQuestionDetail(id)
    },
    // 点击打开审核
    clickAudit (id) {
      this.AuditdialogVisible = true
      this.$refs.questionAudit.editAudit(id)
    },
    // 点击上架或者下架
    Clicktoonline (row) {
      if (row.publishState === 0) {
        this.$confirm('您确认上架这道题目吗?, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          row.publishState = row.publishState === 0 ? 1 : 0
          await choicePublish(row)
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$confirm('您确认下架这道题目吗?, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          row.publishState = row.publishState === 0 ? 1 : 0
          await choicePublish(row)
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    // 点击删除
    async deleteupanddowm (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.tableData.length === 1 && this.pages > 1) {
          this.pages--
          await delupanddown(row)
          this.$refs.seach.search(this.currentPage, this.currentSize)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 手动更新页面数据
          this.$refs.seach.search(this.currentPage, this.currentSize)
          return
        }
        await delupanddown(row)
        this.$refs.seach.search(this.currentPage, this.currentSize)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 编辑题目
    editQuestion (id) {
      this.$router.push(`/questions/new/?id=${id}`)
    },
    handleCustomEvent () {
      this.$refs.seach.search(this.currentPage, this.currentSize)
    }
  }
}
</script>
<style lang='scss'  scoped>
.box {
  padding: 5px 10px;
  .main {
    background-color: #fff;
    padding: 20px;
    .header {
      text-align: right;
      margin-bottom: 15px;
    }
    .audit {
      .el-table__cell {
        display: flex;
      }
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}
</style>
